<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <single-line-chart :chart-data="contentAddTrend" />
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <single-line-chart :chart-data="questionAddTrend" />
    </el-row>

     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <single-line-chart :chart-data="wordAddTrend" />
    </el-row>
    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->

  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import SingleLineChart from "./dashboard/SingleLineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";

import { addTrend } from "@/api/note/index";

export default {
    name: "Index",
    components: {
        PanelGroup,
        SingleLineChart,
        RaddarChart,
        PieChart,
        BarChart
    },
    data() {
        return {
            contentAddTrend: {},
            wordAddTrend: {},
            questionAddTrend: {}
        };
    },

    created() {
        this.updateTrend();
    },
    methods: {
        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type];
        },
        updateTrend() {
            addTrend().then(response => {
                this.contentAddTrend = this.getChartData(
                    response.data.contentAddTrend,
                    "近期笔记添加趋势"
                );
                this.questionAddTrend = this.getChartData(
                    response.data.questionAddTrend,
                    "近期题目添加趋势"
                );
                this.wordAddTrend = this.getChartData(
                    response.data.wordAddTrend,
                    "近期词条添加趋势"
                );
            });
        },
        getChartData(array, text) {
            var data = {
                text: text,
                xAxis: [],
                seriesData: [],
                legend: "数量"
            };
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                data.xAxis.push(element.times);
                data.seriesData.push(element.num);
            }
            return data;
        }
    }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>
